<template>
  <div class="switch">
    <div v-text="textLeft" class="switch-item" :class="{'checked-item':checkedLeft}"
         @click="clickLeft"></div>
    <div v-text="textRight" class="switch-item" :class="{'checked-item':checkedRight}"
         @click="clickRight"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';

  export default {
    /** kebab-case */
    name: 'switcher',

    data() {
      return {
        checkedLeft: true,
        checkedRight: false
      };
    },
    /** 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
     String/Number/Boolean/Function/Object/Array/Symbol */
    props: {
      textLeft: {
        required: true,
        type: String,
        default: '0'
      },
      textRight: {
        required: true,
        type: String,
        default: '1'
      }
    },

    components: {},

    methods: {
      getIcon(icon) {
        return Public.ossImg + icon + '.svg';
      },
      clickLeft() {
        this.checkedLeft = true;
        this.checkedRight = false;
        this.$emit('clickLeft');
      },
      clickRight() {
        this.checkedLeft = false;
        this.checkedRight = true;
        this.$emit('clickRight');
      }
    },
    computed: {},
    watch: {
      // 监听具体数据变化，并做相应的处理
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .switch
    width vw(100)
    height vw(25)
    overflow hidden
    border 1px solid main-color
    border-radius vw(12.5)
    flex-center()

  .switch-item
    flex 1
    flex-center()
    background white
    height 100%
    word-vw(12, main-color)

  .checked-item
    word-vw(12, white)
    background gradient-color

</style>
